<template>
	<div class="lietou-detail content">
		<div class="detail-bg"></div>
		<div class="lietou-right">
			<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />

			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">基本信息</h2>
				<el-button type="info" size="small" class="lahei-btn" @click="onAddShield" v-if="detailMsg.is_black==1">拉黑</el-button>
				<div class="lahei-btn" v-else>已拉黑</div>
				<section class="flexed">
					<div class="lietou-msg">
						<img :src="detailMsg.headpic=='0'?require(`@/assets/images/mine_default_img.png`):detailMsg.headpic" class="avatar" />
						<div class="lietou-msg-right">
							<p>昵称：{{detailMsg.nickname=='0'?'未设置':detailMsg.nickname}}</p>
							<p>手机号：{{detailMsg.usertel}}</p>
							<p>{{detailMsg.sex==1?'男':'女'}} {{detailMsg.age}}岁</p>
						</div>
					</div>
					<div class="lietou-number lietou-msg-right">
						<p>注册时间：{{detailMsg.create_time}}</p>
						<p>名下工人数： {{detailMsg.sum_worker}}</p>
						<router-link :to="{path:'lietouWokersList',query:{id:detailId}}" class="works">查看工人名单</router-link>
					</div>
				</section>
			</div>
			<!-- 账户信息 -->
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">账户信息</h2>
				<router-link :to="{path:'lietouDetailAcount',query:{id:detailId}}" class="works  lahei-btn">查看账户流水</router-link>
				<div class="acount">
					<span>账户余额：{{detailMsg.money}}元</span>
					<span>累计收入：{{detailMsg.total}}元</span>
					<span>提现中金额：{{detailMsg.fz_money}}元</span>
				</div>
				<div class="acount">
					<span>银行卡号：{{detailMsg.bank!== undefined&&detailMsg.bank.length>0 ? detailMsg.bank[0].bankcardno : ''}}</span>
					<span>持卡人：{{detailMsg.bank!== undefined&&detailMsg.bank.length>0 ? detailMsg.bank[0].humanname : ''}}</span>
					<span>银行名称：{{detailMsg.bank!== undefined&&detailMsg.bank.length>0 ? detailMsg.bank[0].bank : ''}}</span>
					<span>开户城市：{{detailMsg.bank!== undefined&&detailMsg.bank.length>0 ? detailMsg.bank[0].cityname : ''}}</span>
					<span>支行名称：{{detailMsg.bank!== undefined&&detailMsg.bank.length>0 ? detailMsg.bank[0].branch : ''}}</span>
				</div>
			</div>
			<!-- 猎聘记录 -->
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">猎聘记录</h2>
				<router-link :to="{path:'lietouLiepinList',query:{id:detailId}}" class="works lahei-btn" v-if="tableData.length>0">查看全部</router-link>
				<el-table header-row-class-name="my-table-header" :data="tableData" class="answerTable"
					:header-cell-style="{ background: '#eee',color:'#555555'}" stripe :row-style="{height:'50px'}"
					:highlight-current-row="true">
					<el-table-column prop="cname" label="公司名称" align="center"></el-table-column>
					<el-table-column prop="cj_name" label="职位名称" align="center"></el-table-column>
					<el-table-column prop="sum" label="介绍人数" align="center"></el-table-column>
					<el-table-column prop="is_worked" label="入职人数" align="center"></el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import Breadcrumb from '@/components/Breadcrumb'
	export default {
		name: 'LietouDetail',
		components: {
			Breadcrumb
		},
		computed: {
			...mapGetters([
				'token'
			])
		},
		data() {
			return {
				searchPhone: '',
				nickname: '',
				tableData: [], //表格数据
				detailId: '', //详情id
				detailMsg: {} //用户详情
			}
		},
		watch: {
			//  '$route': function(newUrl,oldUrl){
			// if(oldUrl.name=='lietouList'){ //详情页面返回的
			// 	if(oldUrl.params.refresh){
			// 	  this.loadData();
			// 	}
			// }
			//  }
		},
		async created() {
			this.detailId = this.$route.query.id;
			this.loadData();
			this.getLiepin();//猎聘记录
		},
		methods: {
			async loadData() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.5)'
				});
				try {
					let res = await this.$http({
						url: '/man/Lietou/getInfo',
						method: 'post',
						params: {
							"token": this.token,
							"id": this.detailId
						}
					});
					this.detailMsg = res.data;
					loading.close();
				} catch (e) {
					console.log(e)
					loading.close();
				}
			},
			async getLiepin() {
				try {
					let res = await this.$http({
						url: '/man/worker/getRecommendList',
						method: 'post',
						params: {
							"token": this.token,
							"lid": this.detailId,
							"p":1,
							"size":5
						}
					});
					this.tableData = res.data;
				} catch (e) {
					console.log(e)
				}
			},
			// 加入黑名单
			onAddShield() {
				this.$confirm('确定将此用户加入黑名单?', '操作确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.laheiHandle();
				}).catch(() => {
					
				});
			},
			// 拉黑操作
			async laheiHandle(){
				try {
					let res = await this.$http({
						url: '/man/Lietou/setBlack',
						method: 'post',
						params: {
							"token": this.token,
							"id": this.detailId,
							"is_black": -1, //是	是否拉黑 1 取消拉黑 -1 拉黑	-1
							"black_reason":'' //	是	拉黑原因
						}
					});
					this.$message({
						type: 'success',
						message: '已加入黑名单!'
					});
					this.$set( this.detailMsg, 'is_black', '-1');
				} catch (e) {
					console.log(e)
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lietou-detail {
		// background-color: #f4f4f4;
		background-color: rgb(240, 242, 245);
		position: relative;

		.detail-bg {
			position: fixed;
			top: 0px;
			left: 0;
			bottom: 0;
			right: 0;
			background: #f4f4f4;
		}

	}

	.lietou-detail-head {
		background-color: #fff;
		margin: 0 0 20px 0px;
		padding-bottom: 25px;
		position: relative;
		min-width: 800px;

		.lietou-detail-h1 {
			font-size: 18px;
			font-weight: bold;
			padding: 20px 16px 15px;
		}

		.lietou-msg {
			width: 280px;
			display: flex;
			margin-left: 30px;

			.avatar {
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
		}

		.lietou-msg-right {
			width: 330px;
			margin-left: 30px;
			font-size: 16px;

			p {
				line-height: 35px;
				margin: 0;
			}
		}

		.works {
			margin-top: 8px;
			display: inline-block;
			color: rgba(33, 120, 241, 1);
		}

		.lietou-number {
			border-left: 1px #ddd solid;
			padding-left: 30px;
		}

		.lahei-btn {
			position: absolute;
			right: 30px;
			top: 25px;
		}

		.acount {
			margin: 0 0 20px 30px;
			padding-top: 8px;

			span {
				margin-right: 50px;
			}
		}

		.answerTable {
			margin: 10px auto;
			width: 96%;
		}
	}
</style>
<style>
	.el-message{
		top:120px !important;
	}
</style>
